<template>
    <div>
        <div class="his-hot" v-if="isShowHistory">
            <div class="hd">
                <h4>历史记录</h4>
                <van-icon name="delete-o" @click="delClick"/>
            </div>
            <div class="bd">  
                <van-tag plain type="default" v-for="(item,index) in historyKeywordList" :key="index" @click="tagClick(item)">{{item}}</van-tag>
            </div>
        </div>
        <div class="his-hot">
            <div class="hd">
                <h4>热门搜索</h4>
            </div>
            <div class="bd">  
                <van-tag plain :type="item.is_hot===1?'danger':'default'" v-for="(item,index) in hotKeywordList" :key="index" @click="tagClick(item.keyword)">{{item.keyword}}</van-tag>
            </div>
        </div>
    </div>
    
</template>

<script>
    import {ClearHistory} from "../../request/api.js"
    export default{
        props:["historyKeywordList","hotKeywordList"],
        data(){
            return{
                isShowHistory:true
            }
        },
        methods:{
            tagClick(val){
                //发起搜索商品的请求
                this.$emit("tagClick",val)
            },
            delClick(){
                console.log("清除历史记录")
                //发起清除历史记录的请求
                ClearHistory().then(res=>{
                    console.log(res)
                    this.$toast.success('删除成功!');
                    setTimeout(()=>{
                        this.isShowHistory = false
                    },500)
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .his-hot{
        background-color: #fff;
        padding: 0.1rem 0.1rem 0;
        margin-bottom: 0.2rem;
    }
    .hd{
        display: flex;
        justify-content: space-between;
        font-size: 0.18rem;
        margin-bottom: 0.1rem;
        .h4{
            font-size: 0.18rem;
        }
    }
    .van-tag{
        margin-right: 0.1rem;
        margin-bottom: 0.1rem;
        padding: 0.01rem 0.04rem;
    }
</style>
